<template>
  <div class="container">
    <!--canvas画布：是html5中新增的一个特性，双闭合标签-->
    <!--有默认的宽高 300 * 150-->
    <!--浏览器认为是一张图片-->
    <!--给canvas画布添加文字内容是没有意义的-->
    <!--给canvas画布增加子节点也是没有意义的-->
    <!--操作画布：绘制图形、显示文字都必须通过JS完成-->
    <!--canvas标签的w｜h务必通过canvas标签属性width｜height 设置-->
    <!--切记不能通过样式去设置画布的宽度和高度-->
    <!--    <canvas width="606" height="606"/>-->

    <!--头部-->
    <header>
      <h1 class="title">数据可视化-ECharts</h1>
      <div class="showTime">Time</div>
    </header>

    <!--主体部分-->
    <sction>
      <el-row :gutter="10">
        <el-col :span="7">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="panel">
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="panel">
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="panel">
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </div>
          </el-card>

        </el-col>
        <el-col :span="10">10</el-col>
        <el-col :span="7">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="panel">
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="panel">
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
            </div>
            <div class="panel">
              <div v-for="o in 4" :key="o" class="text item">
                {{ '列表内容 ' + o }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

    </sction>

    <!--主体部分-->
    <!--    <section class="mainBox">
          <div class="column1">
            <div class="panel bar">
              <h2>柱形图-就业行业</h2>
              <div class="chart">图表</div>
              <div class="panel-footer" />
            </div>
            <div class="panel">
              <h2>柱形图-就业行业</h2>
              <div class="chart">图表</div>
              <div class="panel-footer" />
            </div>
            <div class="panel">
              <h2>柱形图-就业行业</h2>
              <div class="chart">图表</div>
              <div class="panel-footer" />
            </div>
          </div>

          <div class="column2">
            &lt;!&ndash;no模块制作&ndash;&gt;
            <div class="no">
              <div class="no-hd">
                <ul>
                  <li>123456</li>
                  <li>123456</li>
                </ul>
              </div>
              <div class="no-bd">
                <ul>
                  <li>前端需求人数</li>
                  <li>市场供用人数</li>
                </ul>
              </div>
            </div>
            &lt;!&ndash;地图模块&ndash;&gt;
            <div class="map">
              <div class="map1" />
              <div class="map2" />
              <div class="map3" />
              &lt;!&ndash;<div class="chart">地图模块</div>&ndash;&gt;
              <Map></Map>
            </div>
          </div>

          <div class="column3">
            <div class="panel">
              <h2>柱形图- </h2>
              <div class="chart">图表</div>
              <div class="panel-footer" />
            </div>
            <div class="panel">
              <h2>柱形图-就业行业</h2>
              <div class="chart">图表</div>
              <div class="panel-footer" />
            </div>
            <div class="panel">
              <h2>柱形图-就业行业</h2>
              <div class="chart">图表</div>
              <div class="panel-footer" />
            </div>
          </div>
        </section>-->
  </div>
</template>

<script>
import Map from './map/index'

export default {
  name: 'EChart',
  components: {
    Map
  }
}

</script>

<style lang="less" scoped>
@import "../../styles/echarts.less";

.el-card {
  //height: 240px;
  margin-bottom: 20px;
  background-color: transparent;
  border: transparent;
}
</style>
